<template>
  <div class="kw-tabs">
    <div class="tab-header">
      <div :class="tabCls(item)" v-for="(item,index) in navList"
           @click = "handleChange(index)" :key="item.name">
        {{item.label}}
      </div>
    </div>
    <div class="kw-tabs-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'kw-tabs',
    props: {
      value: [String, Number],
      required: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        currentIndex: null,
        currentValue: this.value,
        navList: []
      }
    },
    methods: {
      tabCls(item) {
        return [
          'tab-nav',
          {
            'is-active': item.name === this.currentValue
          }
        ]
      },
      getTabs() {
        return this.$children.filter(function (item) {
          return item.$options.name === 'kw-tab-pane'
        })
      },
      updateNav() {
        this.navList = []
        let _this = this
        this.getTabs().forEach(function (pane, index) {
          _this.navList.push({
            label: pane.label,
            name: pane.name || index
          })
          if (!pane.name) pane.name = index
          if (index === 0) {
            if (!_this.currentValue) {
              _this.currentValue = pane.name || index
            }
          }
        })
        this.updateStatus()
      },
      updateStatus() {
        let tabs = this.getTabs()
        let _this = this
        tabs.forEach(function (tab) {
          let b = tab.name === _this.currentValue
          tab.show = b
          return tab.show
        })
      },
      handleChange(index) {
        let nav = this.navList[index]
        let name = nav.name
        this.currentValue = name
        this.$emit('input', name)
        this.$emit('on-click', name)
        if (this.currentIndex !== index) {
          this.currentIndex = index
          this.$emit('on-change', name, index)
        }
      }
    },
    watch: {
      value: function(val) {
        this.currentValue = val
      },
      currentValue() {
        this.updateStatus()
      }
    }
  }
</script>

<style lang="less">
  .kw-tabs {
    .tab-header {
      width: 100%;
      display:flex;
      flex-direction:row;
      .tab-nav {
        flex: 1;
        position: relative;
        padding: 0 20px;
        height: 40px;
        line-height: 40px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        list-style: none;
        font-size: 14px;
        font-weight: 500;
        /*color: #303133;*/
        color: white;
        white-space: nowrap;
        /*border-bottom: 2px solid #e4e7ed;*/
        cursor: pointer;
        &:first-child {
          /*padding-left: 0;*/
        }
        &:last-child {
          padding-right: 0;
        }
        &:hover, &:focus, &.is-active {
          /*color: #409EFF;*/
          /*background: rgba(0,0,0,0.5);*/
        }
        &.is-active {
          /*border-bottom-color: #409EFF;*/
          background: rgba(0,0,0,0.2);
          &:after {
            content: '';
            display: block;
            overflow: hidden;
            position: absolute;
            height: 0;
            width: 0;
            border: 4px solid transparent;
            border-top-color: rgba(0,0,0,0.2);
            bottom: -8px;
            margin-left: -4px;
            left: 50%;
          }
        }
      }
    }
    .tab-content {
      width: 100%;
      overflow: hidden;
      position: relative;
      padding: .5rem;
      .tab-pane {
        display: none;
        &.is-active {
          display: block;
        }
      }
    }
  }
</style>